<template>
    <div class="login-content">
        <van-nav-bar title="个人信息"
            left-text="返回"
            left-arrow
            @click="backEvt"/>
        <div class="reg-content">
            <van-form @submit="onSubmit">
                <van-cell-group>
                    <van-field name="photo"
                        label="头像"
                        placeholder="输入头像"
                        :rules="[{ required: true, message: '请填写头像' }]">
                        <template #input>
                            <van-uploader v-model="form.photo"
                                :max-count="1"
                                />
                        </template>
                    </van-field>
                    <van-field v-model="form.name"
                        name="name"
                        label="昵称"
                        placeholder="输入昵称"
                        :rules="[{ required: true, message: '请填写昵称' }]"/>
                   
                    <van-field name="sex"
                        label="性别"
                        placeholder="请输入你的性别"
                        :rules="[{ required: true, message: '请输入性别' }]">
                        <template #input>
                            <van-radio-group v-model="form.sex" direction="horizontal">
                                <van-radio name="男">男</van-radio>
                                <van-radio name="女">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field v-model="form.address"
                        name="address"
                        label="所在地"
                        placeholder="请输入地址"
                        />
                       
                    <van-field v-model="form.birthday"
                        name="birthday"
                        label="生日"
                        placeholder="输入生日"
                        :rules="[{ required: true, message: '请填写生日' }]"
                        @click="show = true"/>
                    <van-field v-model="form.remark"
                        name="remark"
                        label="简介"
                        placeholder="简单介绍一下自己"/>
                </van-cell-group>
                <van-button type="primary"
                    square
                    color="linear-gradient(to right, #0958d9, #002c8c)"
                    block
                    native-type="submit">确定</van-button>
                
            </van-form>
        </div>

        <van-popup v-model:show="show"
             position="bottom">
            <van-date-picker title="选择日期"
                @cancel="show = false"
                @confirm="pickDate"/>
        </van-popup>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref,  } from 'vue'
import { useRouter } from 'vue-router';
import Ajax from '../../apis/Ajax';

const router =useRouter()
// const emit = defineEmits()
const show = ref(false)
const form = reactive({
    "name": "",
    "photo": [],
    "sex": "男",
    "address": "",
    "birthday": "",
    "remark": "",
    "areaList":[]
})

/* 提交保存方法 */
function onSubmit() {
 Ajax({
    
 })
}



/* 选择生日 */
function pickDate(arg: any) {
    form.birthday = arg.selectedValues.join('/')
    show.value = false
}

/* 返回按钮事件 */
function backEvt() {
    
    router.push('/mine')
}
</script>

<style lang="less" scoped>
.login-content {
    height: 100%;
    overflow-x: hidden;
}
.reg-content {
    display: block;
    position: relative;
    height: calc(100% - 46px);
    // padding: 12px;
    overflow-x: hidden;
    .van-cell-group {
        margin: 0 0 12px;
    }
}
</style>